<template>
    <div class="logistics-explain">
        <h2>How does PODpartner calculate the shipping cost for a package that contains several different items?</h2>
        <p>As shown in the shipping chart above, the shipping rates are divided into three categories based on the item types. In other words, each type of item corresponds to a particular shipping cost. The total shipping cost per package is the sum of the individual shipping costs of the items included. The more items added, the higher the cost. </p>
        <p>Specifically, the initial shipping cost is determined by the item with the highest shipping cost in a package. The rest of the items will be considered “Additional” and be charged according to shipping rates for “Additional items”.</p>
        <div class="logistics-explain-price">For example, if you ship one T-shirt and two hoodies to the USA. The initial shipping cost is
            <CommonCurrencyRate :price="889" type="icon|price" />(hoodie), and the total will be
            <CommonCurrencyRate :price="889" type="icon|price" /> +
            <CommonCurrencyRate :price="637" type="icon|price" />(additional hoodie) +
            <CommonCurrencyRate :price="244" type="icon|price" />(additional T-shirt) =
            <CommonCurrencyRate :price="1770" type="icon|price" />
        </div>

        <!-- <p>
            The costs of shipping one T-shirt and two hoodies to the USA are
            <strong style="margin-left: 20px">$17.7 = 2.44 + 8.89 + 6.37</strong>
        </p> -->
        <table class="logistics-explain-table">
            <thead>
                <tr>
                    <th>Item type</th>
                    <th>First item</th>
                    <th>Additional item</th>
                    <th>Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Hoodie</td>
                    <td>
                        <CommonCurrencyRate :price="889" type="icon|price" />
                    </td>
                    <td>
                        <CommonCurrencyRate :price="637" type="icon|price" />
                    </td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>T-shirt</td>
                    <td>
                        <CommonCurrencyRate :price="496" type="icon|price" />
                    </td>
                    <td>
                        <CommonCurrencyRate :price="244" type="icon|price" />
                    </td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
        <h2>Will my online store customers be notified when PODpartner ships out products?</h2>
        <p>When PODpartner ships out an order imported from your online store, the tracking number will be automatically synced to your storefront so that your customers can be updated on the shipping status.</p>

        <p>For more information about shipping, please visit <nuxt-link to="/document/help-center">Help center</nuxt-link> or get in touch with our <a href="https://m.me/PodPartnerCo" target="_blank">customer service</a>. </p>

        <!--
        <h2>Is the delivery time affected by the epidemic?</h2>
        <p>
            The epidemic situation of the order arriving in the destination
            country/region will impact the shipping time, determined by the
            local epidemic prevention and control measures and regulations. In
            countries/regions with severe epidemics, delivery time may be
            delayed. If you have any questions, please contact our customer
            service staff.
        </p> -->
    </div>
</template>
<script>
export default {
    name: "LogisticsText",
    data () {
        return {};
    },
    methods: {},
};
</script>
<style lang="scss" scoped>
.logistics-explain {
    max-width: 980px;
    box-sizing: border-box;
    padding: 50px 14px 80px;
    font-family: 'Roboto';
    > h2 {
        font-size: 28px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        margin: 70px 0 24px;
        line-height: 40px;
    }
    > p {
        font-size: 18px;
        color: #555555;
        line-height: 26px;
        margin-bottom: 24px;
        > strong {
            color: #000000;
            font-weight: normal;
            font-family: Arial, Helvetica, sans-serif;
        }

        a {
            color: #087196;
            text-decoration: underline;
            &:hover {
                color: #287e9c;
                text-decoration: none;
            }
        }
    }

    .logistics-explain-price {
        font-size: 18px;
        color: #555555;
        line-height: 26px;
        margin-bottom: 24px;
        .currency-rate {
            display: inline-block;
        }
    }
    > table {
        th {
            width: 258px;
            height: 60px;
            background: #f6f6f6;
            border: 1px solid #d8d8d8;
        }
        td {
            text-align: center;
            width: 258px;
            height: 60px;
            background: #ffffff;
            border: 1px solid #d8d8d8;

            font-size: 16px;

            color: #000000;
            line-height: 18px;
        }
        th,
        td:first-child {
            font-size: 16px;

            font-weight: bold;
            color: #000000;
            line-height: 18px;
        }

        .currency-rate {
            font-family: 'Arial';
        }
    }
}

@media (max-width: 960px) {
    .logistics-explain {
        padding: 32px 0;
        & > h2 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            line-height: 22px;
        }
        p {
            margin-top: 14px;
            margin-bottom: 0;
            font-size: 16px;
            font-weight: 400;
            color: #555555;
            line-height: 24px;
        }

        .logistics-explain-table {
            margin: 14px 0 24px;
        }
    }
}
</style>
